import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 不引用适配的flexible.js顶部和底部导航的宽度太窄
import './assets/css/reset.css'
import './utils/flexible.js'
import SongItem from './components/SongItem.vue'
// yarn add babel-plugin-import -D 是一款babel插件 编译过程将import自动转换为按需引入的方式

// 全局引入 需要导入样式 按需导入不需要引入样式
// import 'vant/lib/index.css'
// import Vant from 'vant'
// Vue.use(Vant)
import {
  Tabbar,
  TabbarItem,
  Button,
  NavBar,
  Col,
  Row,
  Image as VanImage,
  Cell,
  Icon,
  Search
} from 'vant'

Vue.use(Search)
// 增强版的 img 标签，提供多种图片填充模式，支持图片懒加载、加载中提示、加载失败提示。
//  Image as VanImage  import导入必须按照这种格式或者单独导入Image
Vue.use(Cell)
Vue.use(Col)
Vue.use(Row)
Vue.use(VanImage)
Vue.use(NavBar)
Vue.use(Tabbar)
Vue.use(TabbarItem)
Vue.use(Icon)
Vue.use(Button)

// 全局注册组件不是 Vue.use而是 Vue.component
Vue.component('SongItem', SongItem)
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
